<template>
  <div class="ui_experience" style="padding-top:46px">
    <van-nav-bar title="经验值明细" left-arrow fixed>
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"></van-icon>
    </van-nav-bar>
    <div class="box">
      <div class="box_list" v-for="item in list" :key="item.id">
        <div>
          <span>{{item.date}}</span>
          <span>{{item.time}}</span>
        </div>
        <div class="box_text">
          <div>{{item.text}}</div>
          <div class="box_text1" >{{item.state}}</div>
        </div>
      </div>
    </div>  
  </div>
</template>
<script>
export default {
  name:'experience',
  data() {
    return {
      list:[
        {
          date:'2018-07-20',
          time:'12 : 12',
          text:'订单交易',
          state:'+1'
        },
        {
          date:'2018-07-20',
          time:'12 : 12',
          text:'订单交易',
          state:'-1'
        },
        {
          date:'2018-07-20',
          time:'12 : 12',
          text:'订单交易',
          state:'-1'
        },
        {
          date:'2018-07-20',
          time:'12 : 12',
          text:'订单交易',
          state:'-1'
        }
      ],
    }
  },
  methods:{
    back() {
      this.$router.go(-1);
    },
  }
}
</script>
<style lang="less" scoped>
.ui_experience{
  .box{
    margin-top: 30px;
    background:#fff;
    color:#999;
    width:100%; 
    font-size:24px;
    .box_list{
      height:127px;
      padding:30px 30px;
      border-bottom:1px solid #e1e1e1;
    }
    .box_text{
      font-size:28px;
      color:#333;
      display: flex;
      justify-content: space-between;
      .box_text1{
        font-size:40px;
      }
    }
  }
}
</style>
